<template>
  <div class="App">
    <!-- 1.绑定属性 -->
    <SonCon
      :age="age"
      :sex="sex"
      :hobby="hobby"
      :friends="friends"
    ></SonCon>
  </div>
</template>

<script>
import SonCon from "./components/SonCon.vue";
export default {
  components: {
    SonCon,
  },
  data() {
    // 向子组件中传值
    return {
      id: 1,
      userName:"null",
      age: 23,
      sex: "男",
      hobby: ["足球", "篮球", "乒乓球", "排球"],
      friends: [
        {
          id: 2,
          userName: "刘备",
          age: 22,
          sex: "男",
          hobby: ["汉语", "英语", "保龄球", "气球"],
        },
        {
          id: 3,
          userName: "关羽",
          age: 27,
          sex: "男",
          hobby: ["棒球", "铁球", "龙球"],
        },
      ],
    };
  },
};
</script>

<style scoped>
.App {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>